<template>
  <div class="StstemMenu">
    <el-card>
      <!-- 新增按钮 -->
      <el-row>
        <el-button type="primary" size="small" @click="openDialog">新增</el-button>
      </el-row>

      <!-- 表格 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="menu"
        row-key="id"
      >
        <el-table-column prop="title" label="菜单名称" width="180" />
        <el-table-column prop="path" label="菜单地址" width="180" />
        <el-table-column prop="mark" label="权限标识" />
        <el-table-column prop="icon" label="图标">
          <template #default="{ row }">
            <svg-icon :icon-class="row.icon" />
          </template>
        </el-table-column>
        <el-table-column prop="component" label="组件路径" />
        <el-table-column prop="type" label="类型">
          <template #default="{row}">
            <div class="typeMenu">{{ handleMenu(row.type) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="is_show" label="是否显示">
          <template #default="{row}">
            <el-switch
              v-if="row.is_show"
              v-model="is_show"
              disabled
            />
            <el-switch
              v-else
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button icon="el-icon-edit" type="primary" size="small" />
            <el-button icon="el-icon-plus" type="warning" size="small" />
            <el-button icon="el-icon-delete" type="danger" size="small" @click="delMenu(row.id)" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹框 -->
    <add-menu ref="addMenu" />
  </div>
</template>
<script>
import { getSystemMenuListApi, delSystemMenuApi } from '@/api/system/menu'
// import { tellListTotreeData } from '@/utils/index'
import AddMenu from './components/menu-dialog.vue'
export default {
  name: 'StstemMenu',
  components: {
    AddMenu
  },
  data() {
    return {
      tableData: [],
      is_show: true
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 获取权限列表
    async initData() {
      const { data: res } = await getSystemMenuListApi()
      this.tableData = res
    },
    // 处理菜单
    handleMenu(type) {
      if (type === 1) {
        return '菜单'
      }
      if (type === 2) {
        return '按钮'
      }
    },
    // 删除
    async delMenu(id) {
      try {
        await this.$confirm('确定删除吗？', '提示')
      } catch (error) {
        return this.$message('取消')
      }
      await delSystemMenuApi(id)
      this.$message.success('删除成功')
      this.initData()
    },
    // 新增
    openDialog() {
      this.$refs.addMenu.showDialog = true
    }
  }
}
</script>
<style lang="scss" scoped>
.StstemMenu {
  padding: 20px 20px 0 20px;
  .menu {
    margin-top: 20px;
    .el-button {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      padding: 0;
    }
  }
  .typeMenu {
    background-color: #ecf5ff;
    border-color: #d9ecff;
    height: 28px;
    padding: 0 10px;
    line-height: 30px;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
    color: #409EFF;
    width: 50px;
  }
}
</style>
